<template>
  <view class="wrap">
    <image
      class="bannerImg"
      src="https://ainengli.meilianshuke.com/jkhx/weight/traditionalCMG.png"
      alt=""
    />
    <view class="content">
      <view class="questionnaire">
        <image
          @tap="selfQuestion"
          class="img"
          src="https://ainengli.meilianshuke.com/jkhx/weight/traditionalCMGQuestion.png"
          alt=""
        />
      </view>
      <view class="popularization">
        <image
          class="img"
          src="https://ainengli.meilianshuke.com/jkhx/common/traditionalPopularization.png"
          alt=""
        />
        <view class="popularizationList">
          <view v-if="list && list.length > 0">
            <view class="item" v-for="(item, index) in list" :key="index" @tap="goDetail(item)">
              <view :class="['left', item.picList.length > 0 ? '' : 'width100']">
                <text class="name">{{ item.title }}</text>
                <view class="title">
                  {{ item.summary }}
                </view>
              </view>
              <image v-if="item.picList.length > 0" class="right" :src="item.picList[0]" alt="" />
            </view>
            <!-- <view class="nomores" v-if="state.status == 'nomore'">没有更多了</view> -->
          </view>
          <view class="nodate" v-else>
            <img class="img" src="https://ainengli.meilianshuke.com/jkhx/noData.png" alt="" />
            <view class="nodate_text">
              <text class="name">暂无数据</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
// import { parseTime } from '@/utils/tools'
import { educationList } from '../../api/sleep'
// import { base_info } from '@/api/moreMessage'
// import slideRule from './components/slideRule'
const state = reactive({
  status: 'more',
  pageNum: 0,
  pageSize: 10,
  isRefresh: false,
  isCancel: false,
  refreshing: true
})
const userInfo = ref({})
const list = ref([])
onShow(() => {
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  //   init()
  educationListFun()
})

// const init = () => {}
const educationListFun = () => {
  state.pageNum++

  if (state.status == 'nomore') {
    return false
  }
  uni.showLoading({
    title: '加载中'
  })
  const param = {
    page: state.pageNum,
    limit: 10,
    categoryName: '中医',
    labelCode: ''
    // categoryName: '运动'
    // empi: userInfo.value.empi
  }
  educationList(param, state.isCancel).then((res) => {
    if (state.isRefresh == true) {
      state.isRefresh = false
      uni.stopPullDownRefresh()
    }
    uni.hideLoading()
    if (res.code == 0) {
      if (res.data && res.data.list && res.data.list.length > 0) {
        const dataList = res.data.list
        // for (let i = 0; i < dataList.length; i++) {
        //   dataList[i].itemContentTwo =
        //     dataList[i].itemContent && JSON.parse(dataList[i].itemContent).content
        //       ? JSON.parse(dataList[i].itemContent).content
        //       : ''
        //   dataList[i].titleTwo =
        //     dataList[i].itemContent && JSON.parse(dataList[i].itemContent).title
        //       ? JSON.parse(dataList[i].itemContent).title
        //       : ''
        //   dataList[i].idTwo =
        //     dataList[i].itemContent && JSON.parse(dataList[i].itemContent).id
        //       ? JSON.parse(dataList[i].itemContent).id
        //       : ''
        // }
        list.value = list.value.concat(dataList)
        if (res.data.list.length < 10) {
          state.status = 'nomore'
        } else {
          state.status = 'more'
        }
      } else {
        state.status = 'nomore'
      }
    }
  })
  return true
}
onPullDownRefresh(() => {
  state.pageNum = 0
  state.status = 'more'
  state.isRefresh = true
  list.value = []
  educationListFun()
})
// 触底事件 - 上拉加载
onReachBottom(() => {
  educationListFun()
})
//
const selfQuestion = () => {
  uni.navigateTo({ url: '/module/src/pages/traditionalCMG/selfQuestionnaire' })
}

const goDetail = (item: any) => {
  uni.navigateTo({ url: '/module/src/pages/traditionalCMG/detail?id=' + item.id })
}
</script>

<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  background: #fff;

  .bannerImg {
    display: block;
    width: 100%;
    height: 300rpx;
  }

  .content {
    display: inline-block;
    width: 100%;
    margin-top: -64rpx;
    background: #fff;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;

    .questionnaire {
      padding: 32rpx 34rpx 48rpx;

      .img {
        display: block;
        width: 100%;
        height: 200rpx;
      }
    }

    .popularization {
      padding: 0rpx 32rpx;
      padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

      .img {
        display: block;
        width: 100%;
        height: 56rpx;
        margin-bottom: 10rpx;
      }

      .popularizationList {
        .item {
          padding: 24rpx 0;

          .left {
            display: inline-block;
            width: calc(100% - 240rpx);
            height: 136rpx;
            margin-right: 32rpx;
            vertical-align: middle;

            .name {
              font-size: 32rpx;
              font-weight: 700;
              color: #222;
            }

            .title {
              display: -webkit-box;
              margin-top: 16rpx;
              overflow: hidden;
              font-size: 24rpx;
              color: #666;
              text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情  text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
              -webkit-line-clamp: 2;

              /* 要显示的行数 */

              /* autoprefixer: off */
              -webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
            }
          }

          .width100 {
            width: 100%;
          }

          .right {
            display: inline-block;
            width: 208rpx;
            height: 136rpx;
            vertical-align: middle;
            border-radius: 16rpx;
          }
        }

        .nomores {
          padding: 0 0 24rpx;
          font-size: 24rpx;
          color: #999;
          text-align: center;
        }

        .nodate {
          text-align: center;

          .img {
            display: inline-block;
            width: 320rpx;
            height: 240rpx;
            margin-top: 140rpx;
          }

          .nodate_text {
            .name {
              display: block;
              margin-top: 10rpx;
              font-size: 28rpx;
              color: #666;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>
